<template>
  <div>
    <h1>文件列表</h1>
    <FolderTree :items="fileItems" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import FolderTree from './components/FolderTree.vue'
const fileItems = ref([
  {
    id: 1,
    name: '文档',
    type: 'folder',
    children: [
      {
        id: 2,
        name: '自我介绍.docx',
        type: 'file'
      },
      {
        id: 3,
        name: '推荐信.docx',
        type: 'file'
      }
    ]
  },
  {
    id: 4,
    name: '照片',
    type: 'folder',
    children: [
      {
        id: 5,
        name: '假期度假',
        type: 'folder',
        children: [
          {
            id: 6,
            name: '沙滩.png',
            type: 'file'
          },
          {
            id: 7,
            name: '深山.png',
            type: 'file'
          }
        ]
      },
      {
        id: 6,
        name: '工作学习',
        type: 'folder',
        children: [
          {
            id: 6,
            name: '制作手剪报.png',
            type: 'file'
          },
          {
            id: 7,
            name: '朗读课文.png',
            type: 'file'
          }
        ]
      }
    ]
  },
  {
    id: 8,
    name: '待办事项.txt',
    type: 'file'
  }
])
</script>
